import React, {Component} from 'react';
import BaseComponent from '../base/BaseComponent';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';
import {
  StyleSheet,
  ImageBackground,
  Platform,
  Text,
  Button,
  TextInput,
  View,
  SafeAreaView,
  FlatList,
  RefreshControl,
  KeyboardAvoidingView,
  TouchableOpacity,
  Image,
  Keyboard,
} from 'react-native';
import {LinearButton, TextButton} from '../../components/Button';
import I18n from 'react-native-i18n';
import {NormalHeader} from '../../components/NavigationHeader';
import {createChannel} from '../../api/channel/index';
import {ScrollView} from 'react-native-gesture-handler';
import * as ImagePicker from 'react-native-image-picker';
import {updateUserInfo, setCurrentRoom} from '../../redux/action';
import {LinerBoardTextInput} from '../../components/TextInput';
import {reportChannel} from '../../api/channel';
class ReportScreen extends BaseComponent {
  constructor(props) {
    super(props);

    this.state = {
      name: '',
      showAdvance: false,
      descrption: '',
    };
  }

  renderComponent = () => {
    return (
      <View style={{backgroundColor: '#160231', flex: 1, padding: 0}}>
        <NormalHeader
          navigation={this.props.navigation}
          text="Report"
          left={{
            icon: require('../../assets/common/common_back_white.png'),
            onPress: () => {
              Keyboard.dismiss();
              this.props.navigation.goBack();
            },
          }}
        />
        <View style={{padding: 20}}>
          <Text style={{fontSize: 15, color: 'white', fontWeight: 'bold'}}>
            Reason:
          </Text>
          <View
            style={{
              flexDirection: 'row',
              flexWrap: 'wrap',
              justifyContent: 'space-around',
              marginTop: 10,
            }}>
            <CheckBox text="Pornography"></CheckBox>
            <CheckBox text="harassment"></CheckBox>
            <CheckBox text="advertising"></CheckBox>
            <CheckBox text="fraud"></CheckBox>
            <CheckBox text="violence"></CheckBox>
            <CheckBox text="other"></CheckBox>
          </View>
          <LinerBoardTextInput
            linearStyle={{height: 120, marginTop: 20}}
            onChangeText={(text) => {
              this.setState({
                descrption: text,
              });
            }}
            placeholder={'input description'}
            multiline={true}></LinerBoardTextInput>
          <LinearButton
            buttonStyle={{marginTop: 150}}
            text="提交"
            onPress={async () => {
              Keyboard.dismiss();

              this._showLoading();
              await reportChannel({
                userToken: this.props.userInfo.token,
                channelId: this.props.currentRoom.channelId,
                content: this.state.descrption,
              });
              this._hideLoading();
              this.props.navigation.goBack();
            }}></LinearButton>
        </View>
      </View>
    );
  };
}

class CheckBox extends Component {
  static propTypes = {
    text: PropTypes.string.isRequired,
  };

  constructor(props) {
    super(props);
    this.state = {
      isChecked: false,
    };
  }

  render() {
    const {text} = this.props;
    return (
      <TouchableOpacity
        style={{
          flexDirection: 'row',
          marginTop: 10,
          alignItems: 'center',
          paddingBottom: 10,
          paddingBottom: 0,
          // marginRight: 50,
          width: '33.3%',
        }}
        onPress={() => {
          this.setState({
            isChecked: !this.state.isChecked,
          });
        }}>
        <Image
          style={{width: 30, height: 30}}
          source={
            this.state.isChecked
              ? require('../../assets/common/checkbox.png')
              : require('../../assets/common/checkbox-empty.png')
          }></Image>
        <Text style={{marginLeft: 4, color: 'white'}}>{text}</Text>
      </TouchableOpacity>
    );
  }
}

const mapStateToProps = (state) => ({
  userInfo: state.User.userInfo,
  currentRoom: state.User.currentRoom,
});

export default connect(mapStateToProps)(ReportScreen);
